<template>
     <h2 style="text-align: center;">商品列表</h2>
    <!-- 查询表单 -->
    <el-form :inline="true"  class="demo-form-inline">
        <!-- 输入框查询 -->
        <el-form-item label="商品名称">
          <el-input v-model="CondInfo.name" placeholder="请输入商品名称" clearable />
        </el-form-item>

        <!-- 下拉框 -->
        <el-form-item label="商品品牌" >
          <el-select v-model="CondInfo.Brand_Id"  >
            <el-option label="请选择" :value="-1" />
             <el-option v-for="item in InfoBrand" :label="item.Brand_Name" :value="item.Brand_Id" />
          </el-select>
        </el-form-item>

        <!-- 价格区间查询 -->
        <el-form-item label="商品价格">
          <el-input v-model="CondInfo.MinPrice" placeholder="最低价格" clearable />-
          <el-input v-model="CondInfo.MaxPrice" placeholder="最高价格" clearable />
        </el-form-item>
        
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="ShowGoodsInfo">查询</el-button>
        </el-form-item>
   </el-form>


     <!-- 显示数据 -->
    <el-table :data="Info" border style="width: 100%">
      <el-table-column prop="Goods_SnowID" label="商品单号" width="150" align="center"/>
      <el-table-column prop="Goods_Name" label="商品名称" width="150" align="center"/>
      <!-- 图片 -->
      <el-table-column prop="Goods_Img" label="商品图片" width="150" align="center">
          <template v-slot="scope">
            <img :src="scope.row.Goods_Img" style="width: 100px;height: 100px;"/>
          </template>
      </el-table-column>
      <!-- 价格 -->
      <el-table-column prop="Goods_Price" label="商品价格" width="150" align="center">
        <template v-slot="scope">
             <span style="color: red ">￥{{ scope.row.Goods_Price.toFixed(2)}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="Brand_Name" label="商品品牌" width="150" align="center"/>
      <el-table-column prop="GT_Name" label="商品类型" width="150" align="center"/>
      <el-table-column prop="Goods_Desc" label="商品描述" width="150" align="center"/>
      <!-- 状态 -->
      <el-table-column prop="Goods_State" label="商品状态"  width="150" align="center">
          <template v-slot="scope">
            <el-tag  v-if="scope.row.Goods_State==true" type="success">上架</el-tag>
            <el-tag  v-else style="color: red">下架</el-tag>
          </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column prop="date" label="操作" align="center">
         <template v-slot="scope">
            <el-button  type="primary" @click="UpdGoods(scope.row.Goods_SnowID)" size="small" style="margin-right: 5px;">修改</el-button>
            <el-button type="danger" @click="DelGoods(scope.row.Goods_SnowID)" size="small">删除</el-button>
         </template>
      </el-table-column>

    </el-table>
    
    <!-- 分页 -->
    <table>
      <tr>
        <td>
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="PageInfo.index"
              v-model:page-size="PageInfo.size"
              :page-sizes="[2,3,5,10]"
              :size="PageInfo.size"
              :disabled="disabled"
              :background="background"
              layout=" sizes, slot"
              :total="PageInfo.zongtiao"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
                当前第<span style="color: red">{{ PageInfo.index }}</span>页,
                共<span style="color: red">{{ PageInfo.zongpage }}</span>页,
                共<span style="color: red">{{ PageInfo.zongtiao }}</span>条,
            </el-pagination>
          </div>
        </td>
        <td>
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="PageInfo.index"
              v-model:page-size="PageInfo.size"
              :page-sizes="[2,3,5,10]"
              :size="PageInfo.size"
              :disabled="disabled"   
              :background="background"
              layout=" slot, prev, pager,next"
              :total="PageInfo.zongtiao"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              prev-text="上一页"
              next-text="下一页"
              >
                <el-button link type="primary" size="small" @click="handleCurrentChange(1)">
                首页
                </el-button>
            </el-pagination>
          </div>
        </td>
        <td>
          <div class="demo-pagination-block">
            <el-pagination
              v-model:current-page="PageInfo.index"
              v-model:page-size="PageInfo.size"
              :page-sizes="[2,3,5,10]"
              :size="PageInfo.size"
              :disabled="disabled"
              :background="background"
              layout=" slot,"
              :total="PageInfo.zongtiao"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              prev-text="上一页"
              next-text="下一页"
              >
                <el-button link type="primary" size="small" @click="handleCurrentChange(PageInfo.zongpage)">
                  尾页
                </el-button>
            </el-pagination>
          </div>
        </td>
      </tr>
    </table>
  </template>
  
<script lang="ts" setup>
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';
    import { ElMessage,ElMessageBox } from 'element-plus'//导入提示信息

    const router=useRouter();
    //显示响应式数据
    const Info=ref([]);
    //钩子函数
    onMounted(()=>{
      GetBrands();//获取品牌信息
      ShowGoodsInfo();//显示
    })
    //品牌响应式数据
    const InfoBrand=ref([{
        Brand_Id: 0,
        Brand_Name: "",
    }])
    //获取品牌信息
    const GetBrands=()=>{
        axios.get("https://localhost:44377/api/Goods/GetGoodsBrand")
        .then(res=>{
            InfoBrand.value=res.data.Data
        })
    }
    //分页响应式数据
    const PageInfo=ref({
      index:1,
      size:2,
      zongtiao:0,
      zongpage:0,
    })
    //侦听
    // watch (PageInfo,()=>{
    //   ShowGoodsInfo();
    // },{deep:true})
    const background = ref(false)
    const disabled = ref(false)
    //修改页容量
    const handleSizeChange = (val: number) => {
      PageInfo.value.size=val;
      ShowGoodsInfo();//跳转到显示页面
    }
    //跳转页
    const handleCurrentChange = (val: number) => {
      PageInfo.value.index=val;
      ShowGoodsInfo();//跳转到显示页面
    }
    //查询条件
    const CondInfo=ref({
      name:"",
      Brand_Id:-1,
      MinPrice:"",
      MaxPrice:"",
    })
    //显示
    const ShowGoodsInfo=()=>{
      axios.get("https://localhost:44377/api/Goods/ShowGoodsInfo",
        {
          params:{
            name:CondInfo.value.name,
            Brand_Id:CondInfo.value.Brand_Id,
            MinPrice:CondInfo.value.MinPrice,
            MaxPrice:CondInfo.value.MaxPrice,
            index:PageInfo.value.index,
            size:PageInfo.value.size,
          }
        }
      )
      .then(res=>{
        Info.value=res.data.Data.Plist,
        PageInfo.value.zongpage=res.data.Data.ZongPage,
        PageInfo.value.zongtiao=res.data.Data.ZongTiao
      })
    }
    //修改
    const UpdGoods=(Goods_SnowID:string)=>{
      router.push({
        name:"UpdGoods",
        params:{
          id:Goods_SnowID
        }
      })
    }
    //删除
    const DelGoods = (Goods_SnowID:number) => {
      ElMessageBox.confirm(
        '确定删除？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          axios.delete("https://localhost:44377/api/Goods/DelGoodsInfo?id="+Goods_SnowID)
          .then(res=>{
            if(res.data.Data>0)
            {
              ElMessage.success("删除成功");
              ShowGoodsInfo();//跳转到显示页面
            }
            else
            {
              ElMessage.error("删除失败");
            }
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '删除失败',
          })
        })
    }
</script>

<!-- 查询样式 -->
<style>
    .demo-form-inline .el-input {
      --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
      --el-select-width: 220px;
    }
</style>

<!-- 分页样式 -->
<style scoped>
    .demo-pagination-block + .demo-pagination-block {
      margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
      margin-bottom: 16px;
    }
</style>
  